<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.content{
				width: 90%;
				margin: 0 auto;
				border: 1px solid orange;
				display: flex;
				flex-flow: column;
				align-items: center;
				
			}
			.content .dianji {
				padding: 20px;
				box-sizing: border-box;
				width: 100%;
			}
			.content .dianji p{
				font-size: 16px;
				color:aqua;
				font-weight: bold;
				background: orange;
				position: relative;
				
			}
			.content .dianji p span{
				position: absolute;
				right: 20px;
				top: 50%;
				transform: translateY(-50%);
			}
			.info{
				border: 1px solid blue;
				padding: 5px;
				box-sizing: border-box;
				width: 100%;
				word-break:break-all;
				display: none;
			}
			
		</style>
	</head>
	<body>
		<div class="content">
			<div class="dianji">
				<p>这里是一个标题！！! <span>></span></p>
				<div class=info>
					nidansdaidjaiosdaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
				</div>
			</div>
			<div class="dianji">
				<p>这里是一个标题！！! <span>></span></p>
				<div class=info>
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
				</div>
			</div>
			<div class="dianji">
				<p>这里是一个标题！！! <span>></span></p>
				<div class=info>
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
				</div>
			</div>
			<div class="dianji">
				<p>这里是一个标题！！! <span>></span></p>
				<div class=info>
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
				</div>
			</div>
			<div class="dianji">
				<p>这里是一个标题！！! <span>></span></p>
				<div class=info>
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
				</div>
			</div>
			<div class="dianji">
				<p>这里是一个标题！！! <span>></span></p>
				<div class=info>
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
				</div>
			</div>
			<div class="dianji">
				<p>这里是一个标题！！! <span>></span></p>
				<div class=info>
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
					这里是显示与隐藏的小内容！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
				</div>
			</div>
		</div>
	</body>
	<script src="jquery-1.10.1.min.js"></script>
	<script>
	
	  $("p").click(function(){
	  	if(!$(this).siblings().is(':visible')){
	  		$(this).siblings().slideDown();
	  	}else{
	  		$(this).siblings().slideUp();
	  	}
	  })
	
		/*
		 
		 * 
		 * 
		 * 
		 * 
		 * 
		 * 
		 * 
		 * 
		 * 
		 * 
		 * 
		 * 
		 * 
		 * 
		 * 
		 * 
		 * */
	</script>
</html>
